<template>
  <div class="login-page">
    <!-- 背景装饰 -->
    <div class="login-bg"></div>

    <!-- 登录卡片容器 -->
    <div class="login-card">
      <!-- 品牌标识 -->
      <div class="brand-logo">
        <svg width="50" height="50" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 19V5C3 3.89543 3.89543 3 5 3H19C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19Z" stroke="#1890ff" stroke-width="2"/>
          <path d="M8.5 8C9.32843 8 10 7.32843 10 6.5C10 5.67157 9.32843 5 8.5 5C7.67157 5 7 5.67157 7 6.5C7 7.32843 7.67157 8 8.5 8Z" fill="#1890ff"/>
          <path d="M16.5 8C17.3284 8 18 7.32843 18 6.5C18 5.67157 17.3284 5 16.5 5C15.6716 5 15 5.67157 15 6.5C15 7.32843 15.6716 8 16.5 8Z" fill="#1890ff"/>
          <path d="M12 13C14.2091 13 16 11.2091 16 9C16 6.79086 14.2091 5 12 5C9.79086 5 8 6.79086 8 9C8 11.2091 9.79086 13 12 13Z" fill="#1890ff"/>
          <path d="M16 18C16 16.3431 13.3137 15 12 15C10.6863 15 8 16.3431 8 18" stroke="#1890ff" stroke-width="2" stroke-linecap="round"/>
        </svg>
      </div>

      <h2 class="title">QY云图库 - 用户登录</h2>
      <div class="desc">智能协同云图库</div>

      <a-form
        :model="formState"
        name="basic"
        autocomplete="off"
        @finish="handleSubmit"
        class="login-form"
      >
        <a-form-item
          name="userAccount"
          :rules="[{ required: true, message: '请输入账号' }]"
          class="form-item"
        >
          <a-input
            v-model:value="formState.userAccount"
            placeholder="请输入账号"
            size="large"
            prefix-icon="user"
            class="form-control"
          />
        </a-form-item>

        <a-form-item
          name="userPassword"
          :rules="[
            { required: true, message: '请输入密码' },
            { min: 6, message: '密码长度不能小于 6 位' },
          ]"
          class="form-item"
        >
          <a-input-password
            v-model:value="formState.userPassword"
            placeholder="请输入密码"
            size="large"
            prefix-icon="lock"
            class="form-control"
          />
        </a-form-item>

        <div class="form-actions">
          <a-checkbox v-model:checked="rememberMe" class="remember-me">记住我</a-checkbox>
          <a href="#" class="forgot-link">忘记密码?</a>
        </div>

        <div class="tips">
          没有账号？
          <RouterLink to="/user/register" class="register-link">去注册</RouterLink>
        </div>

        <a-form-item class="submit-item">
          <a-button
            type="primary"
            html-type="submit"
            size="large"
            class="submit-btn"
            :loading="loading"
          >
            登录
          </a-button>
        </a-form-item>
      </a-form>

      <div class="copyright">
        © 2025 QY云图库 版权所有
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { RouterLink } from 'vue-router'
import router from '@/router'
import { loginUsingPost } from "@/api/userController";
import { useLoginUserStore } from "@/stores/useLoginUserstore";

// 表单数据
const formState = reactive<API.UserLoginRequest>({
  userAccount: '',
  userPassword: '',
})

// 记住密码状态
const rememberMe = ref(false)
// 加载状态
const loading = ref(false)

const loginUserStore = useLoginUserStore()

// 页面初始化时读取本地存储
onMounted(() => {
  const savedUser = localStorage.getItem('savedUser')
  if (savedUser) {
    try {
      const { userAccount, userPassword } = JSON.parse(savedUser)
      formState.userAccount = userAccount || ''
      formState.userPassword = userPassword || ''
      rememberMe.value = true
    } catch (e) {
      console.error('读取保存的用户信息失败', e)
      localStorage.removeItem('savedUser')
    }
  }
})

/**
 * 提交表单
 * @param values
 */
const handleSubmit = async (values: any) => {
  loading.value = true
  try {
    const res = await loginUsingPost(values)
    // 登录成功处理
    if (res.data.code === 0 && res.data.data) {
      // 判断是否需要记住密码
      if (rememberMe.value) {
        // 保存到本地存储
        localStorage.setItem('savedUser', JSON.stringify({
          userAccount: formState.userAccount,
          userPassword: formState.userPassword
        }))
      } else {
        // 清除本地存储
        localStorage.removeItem('savedUser')
      }

      await loginUserStore.fetchLoginUser()
      message.success('登录成功')
      router.push({
        path: '/',
        replace: true,
      })
    } else {
      message.error('登录失败，' + res.data.message)
    }
  } catch (error) {
    message.error('网络异常，请稍后重试')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
/* 原有样式保持不变 */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
}
/* 背景装饰 - 增加层次感 */
.login-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(24, 144, 255, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(24, 144, 255, 0.05) 0%, transparent 40%);
  z-index: 0;
}

/* 登录卡片 - 增加立体感 */
.login-card {
  width: 100%;
  max-width: 450px;
  margin-bottom: 130px;
  margin-left: 20px;
  background: #ffffff;
  padding: 40px 30px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.login-card:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

/* 品牌标识 */
.brand-logo {
  text-align: center;
  margin-bottom: 24px;
}

/* 标题样式 */
.title {
  text-align: center;
  margin-bottom: 10px;
  font-size: 22px;
  font-weight: 600;
  color: #1f2329;
}

.desc {
  text-align: center;
  color: #86909c;
  margin-bottom: 30px;
  font-size: 14px;
}

/* 表单样式 */
.login-form {
  width: 100%;
}

.form-item {
  margin-bottom: 18px !important;
}

/* 输入框样式 */
.form-control {
  border-radius: 8px !important;
  height: 46px !important;
  transition: all 0.2s ease !important;
  border-color: #d9d9d9 !important;
}

.form-control:focus {
  border-color: #1890ff !important;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2) !important;
}

/* 表单操作区 */
.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-size: 14px;
}

.remember-me {
  color: #4e5969 !important;
}

.forgot-link {
  color: #1890ff !important;
  text-decoration: none !important;
  transition: color 0.2s;
}

.forgot-link:hover {
  color: #096dd9 !important;
  text-decoration: underline !important;
}

/* 注册提示 */
.tips {
  color: #86909c;
  text-align: right;
  font-size: 13px;
  margin-bottom: 20px;
}

.register-link {
  color: #1890ff;
  margin-left: 4px;
  text-decoration: none;
  transition: color 0.2s;
}

.register-link:hover {
  color: #096dd9;
  text-decoration: underline;
}

/* 提交按钮 */
.submit-item {
  margin-bottom: 0 !important;
}

.submit-btn {
  width: 100% !important;
  height: 46px !important;
  font-size: 16px !important;
  border-radius: 8px !important;
  background-color: #1890ff !important;
  border-color: #1890ff !important;
  transition: all 0.3s ease !important;
}

.submit-btn:hover {
  background-color: #096dd9 !important;
  border-color: #096dd9 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3) !important;
}

/* 版权信息 */
.copyright {
  text-align: center;
  font-size: 12px;
  color: #86909c;
  margin-top: 24px;
}

/* 响应式调整 */
@media (max-width: 480px) {
  .login-card {
    padding: 30px 20px;
    margin: 0 15px;
  }

  .title {
    font-size: 20px;
  }
}
/* 其他样式省略... */
</style>
